<template>
	<sl-page title="邀请顾客">
		<view class="customer">
			<view class="">
				<sl-image :value="customer.image" mode="aspectFit"></sl-image>
			</view>
			<sl-flooter>
				<view class="btn-primary" @click="invite()">生成专属邀请</view>
			</sl-flooter>
			<!-- 分享海报 -->
			<SharePosters :shareId.sync="shareId" :shareType="shareType" :painterImage="painterImage"
				:painterTextDescription="customer.name" painterTextLabel="专属邀请" :targetPage="painterTargetPage">
			</SharePosters>
		</view>
	</sl-page>
</template>
<script>
	import PosterApi from '@/api/poster/poster.js';
	import ShareApi from '@/api/share/share.js';
	import Constants from '@/constants';
	import SharePosters from '@/pages/components/share/sharePosters.vue';

	export default {
		//
		name: 'customer',
		//
		mixins: [Constants],
		//
		components: {
			SharePosters
		},
		//
		data() {
			return {
				options: {},
				query: {},
				customer: {},
				shareId: '',
				shareType: '',
				painterImage: '',
				painterTargetPage: 'xj_shop/goods/index',
			};
		},
		//
		onLoad(options) {
			this.loadPage();
		},
		//
		methods: {
			//装在页面对象
			loadPage: async function() {
				try {
					this.query.type = 1;
					//todo，应该根据类型来查询，后台可能没有查询参数，改造api中getcustomer方法，可以根据type进行过滤
					const res = await PosterApi.query(this.query, this.param);
					this.customer = res.obj.data[0];
					this.painterImage = this.$options.filters['ImageSrc'](this.customer.image)
				} catch (error) {
					console.error(error);
				}
			},
			//生成专属邀请
			invite: async function() {
				const res = await ShareApi.customer(this.customer.id);
				this.shareId = res.obj.shareId;
				this.shareType = res.obj.shareType;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.customer {
		// font-size: $uni-font-size-base;
		// color: $uni-text-color-primary;

		// .customer-image {
		// 	position: relative;
		// 	width: 100%;
		// 	height: 85vh;
		// }
	}
</style>